<template>
  <div ref="contributionLogistics" class="contributionLogistics"></div>
</template>

<script>
  export default {
    name: 'contributionLogistics',
    components: {

    },
    data() {
      return {

      }
    },
    mounted() {
      var that = this;
      that.getEchartData()
      setInterval(function(){
        that.getEchartData()
      },5000)
    },
    methods: {
      getEchartData() {
        const contributionLogistics = this.$refs.contributionLogistics;
        if (contributionLogistics) {
          const myChart = this.$echarts.init(contributionLogistics)
          var that = this;
          that.$myHttp.get("getB2BWuLiuInfo")
            .then(function(data0) {
              if (data0.status == "200") {
                  var titerArr=['COMPANYSHORT'];
                  var dataArr = {};
                  var dataArr1 = [];
                  // console.log(data0.data.hn_huoyun)
                  // {YEAR: "2017", DANLIANG: 2.07, COMPANYSHORT: "中大门"}
                 data0.data.hn_wuliu.forEach((item,index)=>{
                    if(dataArr[item.YEAR]){
                      dataArr[item.YEAR].push({DANLIANG:item.DANLIANG,COMPANYSHORT:item.COMPANYSHORT})
                    }else{
                      dataArr[item.YEAR] =[{DANLIANG:item.DANLIANG,COMPANYSHORT:item.COMPANYSHORT}]
                    }
                    if(titerArr.indexOf(item.COMPANYSHORT)==-1){
                      titerArr.push(item.COMPANYSHORT)
                    }
                  })

                  var titerArrNew = titerArr.slice(0,titerArr.indexOf('其他')).concat(titerArr.slice(titerArr.indexOf('其他')+1,titerArr.length))
                  // console.log(titerArrNew)
                  titerArrNew.push("其他")
                  dataArr1.push(titerArrNew);
                  var i=1;
                  for(let item in dataArr){
                     dataArr1[i]=[];
                    dataArr1[i][0]=item
                    dataArr[item].forEach((ele,index)=>{
                      if(ele.COMPANYSHORT=="中大门"){
                        dataArr1[i][1]=ele.DANLIANG
                      }else if(ele.COMPANYSHORT=="申通"){
                        dataArr1[i][2]=ele.DANLIANG
                      }else if(ele.COMPANYSHORT=="圆通"){
                        dataArr1[i][3]=ele.DANLIANG
                      }else if(ele.COMPANYSHORT=="韵达"){
                        dataArr1[i][4]=ele.DANLIANG
                      }else if(ele.COMPANYSHORT=="邮政"){
                        dataArr1[i][5]=ele.DANLIANG
                      }else if(ele.COMPANYSHORT=="安达信"){
                        dataArr1[i][6]=ele.DANLIANG
                      }else if(ele.COMPANYSHORT=="中通"){
                        dataArr1[i][7]=ele.DANLIANG
                      }else if(ele.COMPANYSHORT=="其他"){
                        dataArr1[i][8]=ele.DANLIANG
                      }
                    })
                    i++;
                  }
                  // console.log(dataArr,titerArr,dataArr1)
                  const option = {
                    legend: {
                      orient: 'horizontal', // 'vertical'
                      x: that.commonFunction.fontSize(0.8), // 'center' | 'left' | {number},
                      y: -that.commonFunction.fontSize(0.05), // 'center' | 'bottom' | {number}
                      padding: that.commonFunction.fontSize(0.05), // [5, 10, 15, 20]
                      itemGap: that.commonFunction.fontSize(0.05),
                      textStyle: { //图例文字的样式
                        color: '#fff',
                        fontSize: that.commonFunction.fontSize(0.1)
                      },
                      itemWidth:that.commonFunction.fontSize(0.15),
                      itemHeight:that.commonFunction.fontSize(0.08),
                      // icon:'circle'
                    },

                    grid: {
                      left: '2%',
                      right: '15%',
                      top:'20%',
                      bottom: '1%',
                      containLabel: true
                    },

                    tooltip: {},
                    dataset: {
                      source: dataArr1
                    },
                    xAxis: {
                      name:'年份',
                      nameLocation:'end',
                      nameTextStyle:{
                       color:'#fff',
                        fontSize:that.commonFunction.fontSize(0.1),
                         width:that.commonFunction.fontSize(0.12),
                         lineHeight:that.commonFunction.fontSize(0.14),
                      },
                      type: 'category',
                      axisLabel: {
                        show: true,
                        textStyle: {
                          color: '#c3dbff', //更改坐标轴文字颜色
                          fontSize:that.commonFunction.fontSize(0.12) //更改坐标轴文字大小
                        }
                      },
                      //							axisTick: {
                      //								show: false
                      //							},
                      axisLine: {
                        lineStyle: {
                          color: '#315070' //更改坐标轴颜色
                        }
                      }
                    },
                    yAxis: {
                      name:'订单（万包）',
                      nameLocation:'end',
                      nameTextStyle:{
                       color:'#fff',
                        fontSize:that.commonFunction.fontSize(0.1),
                         width:that.commonFunction.fontSize(0.12),
                         lineHeight:that.commonFunction.fontSize(0.14),
                      },
                      // axisTick: {//网刻度线
                      //   show: false
                      // },
                      splitLine: { //网格线
                        show: false
                      },
                      axisLabel: {
                        show: true,
                        textStyle: {
                          color: '#c3dbff', //更改坐标轴文字颜色
                          fontSize: that.commonFunction.fontSize(0.12) //更改坐标轴文字大小
                        }
                      },
                      //							axisTick: {
                      //								show: false
                      //							},
                      axisLine: {
                        lineStyle: {
                          color: '#315070' //更改坐标轴颜色
                        }
                      }
                    },
                    // Declare several bar series, each will be mapped
                    // to a column of dataset.source by default.

                    series: [{
                        type: 'bar',
                        // barWidth: '10%',
                        // barGap:'50%',//柱图间距
                        itemStyle: {
                          normal: {
                            color: '#4ff1fb'
                          }
                        }
                      },
                      {
                        type: 'bar',
                        // barWidth: '10%',
                        // barGap:'50%',//柱图间距
                        itemStyle: {
                          normal: {
                            color: '#00aefd '
                          }
                        }
                      },
                      {
                        type: 'bar',
                        // barWidth: '10%',
                        // barGap:'50%',//柱图间距
                        itemStyle: {
                          normal: {
                            color: '#f3d034 '
                          }
                        }
                      },
                      {
                          type: 'bar',
                          // barWidth: '10%',
                          // barGap:'50%',//柱图间距
                          itemStyle: {
                            normal: {
                              color: '#5f48ff '
                            }
                          }
                        },
                        {
                          type: 'bar',
                          // barWidth: '10%',
                          // barGap:'50%',//柱图间距
                          itemStyle: {
                            normal: {
                              color: ' #ae3ee2  '
                            }
                          }
                        },
                        {
                          type: 'bar',
                          // barWidth: '10%',
                          // barGap:'50%',//柱图间距
                          itemStyle: {
                            normal: {
                              color: '#09d478  '
                            }
                          }
                        },
                        {
                            type: 'bar',
                            // barWidth: '10%',
                            // barGap:'50%',//柱图间距
                            itemStyle: {
                              normal: {
                                color: '#ff8d28  '
                              }
                            }
                          },
                          {
                            type: 'bar',
                            // barWidth: '10%',
                            // barGap:'50%',//柱图间距
                            itemStyle: {
                              normal: {
                                color: '	#fdfda8'
                              }
                            }
                          }
                    ]
                  };
                  myChart.setOption(option)
                  window.addEventListener("resize", function() {
                    myChart.resize()
                  })

              }  else {
                alert("数据请求错误")
              }

            })
            .catch(function(error) {
              alert(error)
            })
          //填写主页内容

        }
      },
      //			this.$on('hook:destroyed', () => {
      //				window.removeEventListener("resize", function() {
      //					myChart.resize();
      //				});
      //			})

    }
  }
</script>
<style scoped="">
  .contributionLogistics{
    width: 100%;
    height: 100%;
  }
</style>
<style scoped="">

</style>
